<script lang="ts" setup>
import { ref, computed } from 'vue'
import { NSpace, NButton, NTag, NIcon, NScrollbar } from 'naive-ui'
import { GlobeOutline } from '@vicons/ionicons5'
// 从 @vicons/antd 中导出全部文件格式类型的图标
import {
  FilePdfOutlined,
  FileWordOutlined,
  FileExcelOutlined,
  FilePptOutlined,
  FileTextOutlined,
  FileUnknownOutlined
} from '@vicons/antd'
const emit = defineEmits(['nextStep'])

const files = ref([
  { name: '文件1.pdf', size: '66.88MB', status: '已上传' },
  { name: '文件2.docx', size: '12.5MB', status: '已上传' }
  // ... 可以添加更多文件
])

const totalTokens = computed(() => files.value.length * 60)
const totalCost = computed(() => totalTokens.value * 0.000000558)

const fileIcon = (fileType: string) => {
  switch (fileType) {
    case 'pdf':
      return FilePdfOutlined
    case 'docx':
      return FileWordOutlined
    case 'xlsx':
      return FileExcelOutlined
    case 'pptx':
      return FilePptOutlined
    case 'txt':
      return FileTextOutlined
    default:
      return FileUnknownOutlined
  }
}

const handleNextStep = () => emit('nextStep')
</script>

<template>
  <div class="max-w-2xl">
    <h1 class="text-3xl mb-8">文本分段与清洗</h1>
    <NSpace vertical>
      <h2 class="text-xl mb-2">🎉 文档已上传</h2>
      <p class="mb-4">在嵌入处理后你将可以在此知识库中查看与测试</p>
      <div class="flex justify-between items-center mb-4">
        <span>嵌入处理中</span>
        <span>
          高质量模式 · 预估消耗 {{ totalTokens }} tokens
          <span class="text-yellow-400">({{ totalCost.toFixed(9) }}$)</span>
        </span>
      </div>
      <NScrollbar style="max-height: calc(100vh - 340px)">
        <NSpace vertical>
          <div
            v-for="(file, index) in files"
            :key="index"
            class="flex bg-gray-100 hover:bg-gray-200 active:bg-gray-300 p-3 rounded-xl justify-between items-center cursor-pointer"
          >
            <div class="flex gap-2 items-center">
              <NIcon size="15" :component="fileIcon(file.name.split('.')[1])"> </NIcon>
              <div>
                <span class="text-lg">{{ file.name }}</span>
                <span class="text-sm text-gray-400">({{ file.size }})</span>
              </div>
            </div>
            <NTag round type="success" size="small">{{ file.status }}</NTag>
          </div>
        </NSpace>
      </NScrollbar>
    </NSpace>
    <NButton class="rounded-xl mt-4 w-full" type="primary" @click="handleNextStep"> 完成 </NButton>
  </div>
</template>

<style scoped>
/* 可以添加任何需要的样式 */
</style>
